$('#image').cropper({
  // 纵横比(宽高比)
  aspectRatio: 1 / 1, // 正方形
  // 指定预览区域
  preview: '.img-preview' // 指定预览区的类名（选择器）
});

// 美化按钮点击后，执行本来按钮的点击
$("#upload").click(function() {
  $("#file").click();
});

// ***************************当我们选择文件时（状态改变）：更换图片地址
$("#file").on("change", function() {
  // 1.change后 可以图片对象！{}
  let obj = this.files[0];

  // 2.需要地址；URL字符串
  let url = URL.createObjectURL(obj);

  // 3.展示图片上：文档！更换图片地址！
  $('#image').cropper("replace", url);
});


// ****************************提交数据
$("#sure").on("click", function() {
  // 1.base64字符串 来自文档！
  let canvas = $('#image').cropper('getCroppedCanvas', {
    width: 100,
    height: 100
  });
  let base64 = canvas.toDataURL('image/png');

  // 了解：base64字符串

  // 2.提交数据
  $.ajax({
    url: "/my/update/avatar",
    type: "POST",
    data: {
      avatar: base64
    },
    success: function(res) {
      layui.use(["layer"], function() {
        let layer = layui.layer;
        layer.msg(res.message);

        if (res.status == 0) {
          window.parent.getInfo();
        }
      });
    }
  })

});